<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标事件-进入和悬停的应用(Mouse Events - Applications for Entering and Hovering)</title>
  <!-- 
  在JavaScript中，鼠标事件的“进入”和“悬停”功能可以用于创建动态和交互式的用户体验。以下是对鼠标事件（如 mouseover、mouseenter、mouseout 和 mouseleave）的应用总结说明：
  一、鼠标事件的基本概念
  1. mouseover 事件：
    - 当鼠标指针移动到元素上方时触发。
    - 该事件会在目标元素及其子元素上触发。
  2. mouseenter 事件：
    - 当鼠标指针进入元素时触发。
    - 该事件只在目标元素上触发，不会在子元素上触发。
  3. mouseout 事件：
    - 当鼠标指针离开元素时触发。
    - 该事件会在目标元素及其子元素上触发。
  4. mouseleave 事件：
    - 当鼠标指针离开元素时触发。
    - 该事件只在目标元素上触发，不会在子元素上触发。

  二、应用场景
  1. 动态样式变化：
    - 使用鼠标事件可以在用户悬停时动态改变元素的样式，例如改变背景色、边框、字体颜色等。
    const button = document.getElementById('myButton');
    button.addEventListener('mouseenter', function() {
      button.style.backgroundColor = 'blue';
      button.style.color = 'white';
    });
    button.addEventListener('mouseleave', function() {
      button.style.backgroundColor = '';
      button.style.color = '';
    });
  2. 显示提示信息：
    - 当用户悬停在某个元素上时，可以显示额外的信息或提示框，帮助用户理解元素的功能。
    const infoElement = document.getElementById('info');
    const tooltip = document.getElementById('tooltip');

    infoElement.addEventListener('mouseover', function() {
        tooltip.style.display = 'block'; // 显示提示框
    });
    infoElement.addEventListener('mouseout', function() {
        tooltip.style.display = 'none'; // 隐藏提示框
    });
  3. 创建交互式菜单：
    - 鼠标事件可以用于创建悬停时显示的下拉菜单，提升用户体验。
    const menu = document.getElementById('menu');
    const dropdown = document.getElementById('dropdown');

    menu.addEventListener('mouseenter', function() {
        dropdown.style.display = 'block'; // 显示下拉菜单
    });
    menu.addEventListener('mouseleave', function() {
        dropdown.style.display = 'none'; // 隐藏下拉菜单
    });
  4. 图像效果：
    - 鼠标悬停时可以实现图像的放大、模糊或其他特效，增加视觉吸引力。
    const image = document.getElementById('myImage');
    image.addEventListener('mouseenter', function() {
      image.style.transform = 'scale(1.2)'; // 放大图像
    });
    image.addEventListener('mouseleave', function() {
      image.style.transform = 'scale(1)'; // 恢复原始大小
    });

  三、总结
  - 鼠标事件的“进入”和“悬停”功能可以用于创建丰富的用户交互效果。
  - 通过动态样式变化、提示信息、交互式菜单和图像效果等应用场景，可以提升用户体验和页面的吸引力。
  - 使用 mouseenter 和 mouseleave 可以避免在子元素上触发事件的情况，提供更精确的控制。
   -->
  <style>
    .mouseover-mouseout, .mouseenter-mouseleave {
      background-color: orange;
    }

    button {
      flex: 1;
      height: 50px;
      margin-right: 10px;
    }
  </style>
</head>

<body>

  <h3>1. mouseover and mouseout</h3>
  <div class="mouseover-mouseout">
    <button>mouseover-mouseout-1</button>
    <button>mouseover-mouseout-2</button>
    <button>mouseover-mouseout-3</button>
    <button>mouseover-mouseout-4</button>
    <button>mouseover-mouseout-5</button>
  </div>

  <h3>2. mouseenter and mouseleave</h3>
  <div class="mouseenter-mouseleave">
    <button>mouseenter-mouseleave-1</button>
    <button>mouseenter-mouseleave-2</button>
    <button>mouseenter-mouseleave-3</button>
    <button>mouseenter-mouseleave-4</button>
    <button>mouseenter-mouseleave-5</button>
  </div>

  <script>
    // 1. mouseover and mouseout
    const mouseover = document.querySelector('.mouseover-mouseout');
    mouseover.addEventListener('mouseover', function(event) {
      console.log('mouseover-进入,子元素受影响', event.target.textContent);
    });
    mouseover.addEventListener('mouseout', function(event) {
      console.log('mouseout-离开,子元素受影响', event.target.textContent);
    });

    // 2. mouseenter and mouseleave
    const mouseenter = document.querySelector('.mouseenter-mouseleave');
    mouseenter.addEventListener('mouseenter', function(event) {
      console.log('mouseenter-进入,子元素不受影响', event.target.textContent);
    });
    mouseenter.addEventListener('mouseleave', function(event) {
      console.log('mouseleave-离开,子元素不受影响', event.target.textContent);
    });

  </script>

</body>

</html>